{% extends 'base.html' %}
{% load static %}

{% block title %}设备详情 - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>设备详情</h1>
        <div class="btn-group">
            <a href="{% url 'assets:asset_manage' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
            <a href="{% url 'assets:asset_admin_edit' asset.pk %}" class="btn btn-primary">
                <i class="bi bi-pencil"></i> 编辑设备
            </a>
        </div>
    </div>

    {% if messages %}
    <div class="alert alert-info">
        {% for message in messages %}
        <div>{{ message }}</div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="row">
        <!-- 设备基本信息 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">基本信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">设备名称:</div>
                        <div class="col-sm-8">{{ asset.name }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">设备编号:</div>
                        <div class="col-sm-8">{{ asset.code|default:"未设置" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">设备型号:</div>
                        <div class="col-sm-8">{{ asset.model|default:"-" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">设备分类:</div>
                        <div class="col-sm-8">
                            <span class="badge bg-secondary">{{ asset.get_asset_type_display }}</span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">序列号:</div>
                        <div class="col-sm-8">{{ asset.serial_number|default:"-" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">设备状态:</div>
                        <div class="col-sm-8">
                            <span class="badge bg-{% if asset.status == 'active' %}success{% elif asset.status == 'maintenance' %}warning{% elif asset.status == 'retired' %}danger{% else %}secondary{% endif %}">
                                {{ asset.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设备分配信息 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">分配信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">分配用户:</div>
                        <div class="col-sm-8">
                            {% if asset.assigned_to %}
                                {{ asset.assigned_to.get_full_name|default:asset.assigned_to.username }}
                            {% else %}
                                <span class="text-muted">未分配</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">所属部门:</div>
                        <div class="col-sm-8">{{ asset.department|default:"-" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">位置:</div>
                        <div class="col-sm-8">{{ asset.location|default:"-" }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 采购信息 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">采购信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">购买日期:</div>
                        <div class="col-sm-8">{{ asset.purchase_date|date:"Y-m-d"|default:"-" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">购买价格:</div>
                        <div class="col-sm-8">
                            {% if asset.purchase_price %}
                                ¥{{ asset.purchase_price }}
                            {% else %}
                                -
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">保修到期:</div>
                        <div class="col-sm-8">{{ asset.warranty_expiry|date:"Y-m-d"|default:"-" }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 时间信息 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">时间信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">创建时间:</div>
                        <div class="col-sm-8">{{ asset.created_at|date:"Y-m-d H:i" }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4 fw-bold">更新时间:</div>
                        <div class="col-sm-8">{{ asset.updated_at|date:"Y-m-d H:i" }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 备注信息 -->
    {% if asset.notes %}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">备注信息</h5>
        </div>
        <div class="card-body">
            <p class="mb-0">{{ asset.notes }}</p>
        </div>
    </div>
    {% endif %}

    <!-- 状态更新表单 -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">更新设备状态</h5>
        </div>
        <div class="card-body">
            <form method="post" action="{% url 'assets:asset_admin_update_status' asset.pk %}">
                {% csrf_token %}
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">选择新状态</label>
                        <select name="status" class="form-select" required>
                            {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if asset.status == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> 更新状态
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.badge {
    font-size: 0.85em;
}
</style>
{% endblock %}
